<template>
  <div>
    <div class="box" v-if="hotList">
      <div class="title">热门城市</div>
      <div
        class="city"
        v-for="val in hotList.cities"
        :key="val.cityId"
        @click="goToHome(val)"
      >
        <div class="hot-item">{{ val.name }}</div>
      </div>
    </div>

    <div class="box" v-for="item in otherList" :key="item.prefix">
      <div class="title">{{ item.prefix | toUp }}</div>
      <div
        class="city"
        v-for="val in item.cities"
        :key="val.cityId"
        @click="goToHome(val)"
      >
        <div class="item">{{ val.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
// import { cityApi } from "../utils/api";
import { mapActions, mapGetters } from "vuex";
export default {
  mounted() {
    this.getCityAsync();
  },

  methods: {
    ...mapActions(["getCityAsync"]),
    // async getData() {
    //   const res = await cityApi();
    //   console.log(res);
    //   this.cityList = res.result;
    // },

    goToHome(city) {
      // console.log(city);
      this.$store.commit("changeCity", city);
      // 严格模式下使用 namespaced: true, 并且没有使用辅助函数的写法的话  正常写法是
      // this.$store.commit("city/changeCity", city);

      //同时存到本地储存出
      localStorage.setItem("name", city.name);
      localStorage.setItem("id", city.cityId);

      // 跳转 后退一步
      this.$router.go(-1);
    },
  },
  // 通过计算属性 将其分成两个数组
  computed: mapGetters(["hotList", "otherList"]),

  // computed: {
  //   hotList() {
  //     return this.cityList[0];
  //   },
  //   otherList() {
  //     return this.cityList.slice(1);
  //   },
  // },

  filters: {
    toUp(val) {
      return val.toUpperCase();
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  background-color: #ebebeb;
  font-size: 20px;
  color: #333;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  padding-left: 20px;
}
.item {
  height: 0.88rem;
  line-height: 0.88rem;
  margin-left: 0.3rem;
  border-bottom: 0.02rem solid #c8c7cc;
}
.hot-item {
  float: left;
  background-color: #fff;
  width: 29%;
  height: 0.66rem;
  margin-top: 0.3rem;
  margin-left: 4%;
  padding: 0 0.08rem;
  border: 0.02rem solid #e6e6e6;
  border-radius: 0.06rem;
  line-height: 0.66rem;
  text-align: center;
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
